<template>
  <Layout @onScroll="scrollHandle" >
       <template v-slot:middle  >
        <h1 class="blog-titlie">{{blogDetalist.title}}</h1>
        <div class="blog-info">
            <span>
               发布日期: {{ getDate(blogDetalist.createdAt)}}
            </span>
            <span>阅读次数:{{ blogDetalist.clickSum <= 999 ? '  '+blogDetalist.clickSum : '999+'  }}</span>

            <span>分类:<router-link :to="{
                name:'articleType',
                params:{
                type:blogDetalist.blogType
                }
            }" >{{blogDetalist.blogType}}</router-link></span>
        </div>
        <div class="html-content markdown-body"   v-html="blogDetalist.htmlContent"></div>
        <div class="blog-end">——— END ———</div>
        <Comment title="评论" @pushComment='submit' :tempCommentlist = "commentListTemp"
        :commentList="commentList" :count="count" ></Comment>
      </template>
      <template v-slot:right >
           <h2 class="r-title">目录</h2>
           <BRightList :list="blogDetalist.toch" @selectId="changeHash" :current ="currentRightTitle"  ></BRightList>
      </template>
  </Layout>
</template>

<script>

import Layout from '../../components/Layout/layout.vue';
import BRightList from './detalistRight.vue';
import {getBlogDetalis} from '../../api/getHomeInfo';
import {getComment,postComment} from '../../api/comment';
import {useRoute} from 'vue-router';
import {onBeforeMount,ref} from 'vue';
import {date} from  "../../compostion/useDate";
import Comment from '../../components/Comment/comment.vue'
import {getRef,commentListTemp,commentList,count,
       setScrollBox,get_Comment,post_Comment,loading,setParmsId
        } from '../../compostion/useRef'
export default {
    
    components:{
        Layout,
        BRightList,
        Comment
    },
    setup(){
        
        const route = useRoute();
        const blogDetalist = ref(null);
        const currentRightTitle = ref("article-md-title-1");
        const tochDom = [];
     
        let maxScroll = null;
     

        const getDate = (d)=>{
            return date(d)
        }
        const changeHash = (current)=>{
           const dom = tochDom.filter((t)=>{
               return t.id == current;
           })
           const top = dom[0].offsetTop;
           const  scrollBox =  getRef();
           scrollBox.scrollTop = top;
           changeCurrt(current);

        }
        const changeCurrt = (current)=>{
            if(currentRightTitle.value == current) return;
             currentRightTitle.value = current;
        }
    
        const scrollHandle =(fn)=>{ //滚动条滚动触发事件，防抖
            fn(async ()=>{
                
                tochDom.forEach((t)=>{
                    
                    if( Math.abs(t.getBoundingClientRect().top) <= 150) changeCurrt(t.id);
                       
                })
                if(getRef().scrollTop <= 100) {
                            changeCurrt(tochDom[0].id);
                }
                if(getRef().scrollTop >= maxScroll){
                            changeCurrt(tochDom[tochDom.length-1].id);
                };
               
                loading(getComment);//懒加载
            })
            
        };
        const getTocDom = (toch=[])=>{ //获取目录锚点元素
            toch.forEach((t)=>{
                const dom =  document.querySelector(`#${t.anchor}`);
                if(dom) tochDom.push(dom);
                if(t.children) getTocDom(t.children);
            })

        }
        const submit = async (e)=>{ //提交评论
          const {name,content,id,text} = e;
          post_Comment(postComment,name,content,id,text,blogDetalist.value.title)

        }
       


        onBeforeMount(async ()=>{
        blogDetalist.value = await getBlogDetalis(route.params._id);

          setParmsId(route.params._id);

          await get_Comment(getComment); 
         
          setTimeout(()=>{
                getTocDom(blogDetalist.value.toch);
                setScrollBox('.container-middle .container-middle')
                maxScroll = tochDom[tochDom.length-1].offsetTop
          },100)
       
        });

        return{
            blogDetalist,
            getDate,
            changeHash,
            currentRightTitle,
            scrollHandle,
            submit,
            commentList,
            count,
            commentListTemp
        }
    }

}
</script>

<style lang="less" scoped>


@import url("../../assets/css/github.css");
@import url("../../assets/css/mackdonw.css");
.blog-titlie,.blog-info{
    padding: 0 20px;
}
.blog-info{
    color:#999 ;
    display: flex;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
   
    
    span{
         margin-right: 6rem;
    }
    a{
        text-decoration: none;
        color: rgb(24, 24, 192);
        padding: 0 5px;
    }
}
.html-content{
   width: 100%;
   box-sizing: border-box;
   padding: 10px 20px;
   /deep/ img{
       width: 100% !important;
   }

}
.blog-end{
    width: 100%;
    text-align: center;
    color: #999;
    user-select: none;
    margin: 20px 0;
}
.r-title{
    text-align: center;
}
</style>